<template>
  <view class="wh_750 flex flex-column align-center bg_F5F5F5 pageHeight">
    <s-header-title ref="headerTitle" :isDisplayBack="page.options.is_share != 1"
                    :isShowHome="page.options.is_share == 1"
                    :title="page.options.is_flag != 1 ?'家庭相册':'个人相册'" is-fixed
                    background="#FFFFFF" @getPageHeight="getPageHeight" z-index="10">
      <template v-if="page.options.is_share != 1">
        <view class="uploadPhoto_headerTitle">
          <text class="uploadPhoto_headerTitle_text">{{
              page.options.is_flag != 1 ? family.detail.name : !!page.options.name ? page.options.name : '暂无家庭名称'
            }}
          </text>
        </view>
      </template>
      <template v-else>
        <view class="uploadPhoto_headerTitle">
          <text class="uploadPhoto_headerTitle_text">{{
              page.options.is_flag != 1 ? family.detail.name : !!page.options.name ? page.options.name : '暂无家庭名称'
            }}
          </text>
        </view>
      </template>
    </s-header-title>
    <view :style="{height:page.headHeight + 'px'}"></view>
    <scroll-view :scroll-y="true" class="uploadPhoto_waterfall flex flex-column align-center"
                 :style="{height:`calc(100vh - ${page.headHeight}px)`}" @scrolltolower="waterfallScrolltolower">
      <view class="wh_750 flex align-start justify-around">
        <view id="left-column" style="width: 340rpx;">
          <view class="uploadPhoto_waterfall_list mt_19" v-for="(item, index) in photoAlbum.leftList" :key="index"
                @click.stop="findOutMore(item,index,'leftList')">
            <image :src="item.image" class="uploadPhoto_waterfall_list_image" mode="widthFix"></image>
            <view class="uploadPhoto_waterfall_list_bottom flex align-center justify-around">
              <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center"
                    style="position:relative;" @click.stop="personalAlbumLikes(item,index,'left')">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       :src="item.is_like != 1 ?`${IMG_URL}/index/thumbsUp.png`:`${IMG_URL}/index/thumbsUp_select.png`">
                </image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">爱心{{ item.like_count }}</text>
                <image class="gif" :src="`${IMG_URL}/index/dianzan_gif.gif`" v-if="!!item.showGif"></image>
              </view>
              <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center"
                    @click.stop="commentsFocus(item,index,'leftList')">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       :src="`${IMG_URL}/index/jiating_gengduoIcon.png`"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">评论{{ item.comment_count }}</text>
              </view>
              <!-- #ifdef MP-WEIXIN -->
              <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center"
                    style="position:relative;">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       :src="`${IMG_URL}/index/jiating_fenxiangIcon.png`"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">分享</text>
                <button open-type="share" class="wh_100 hW_100"
                        :data-info="item"
                        style="position: absolute;top: 0;left: 0;opacity: 0;" @tap.stop="sharePhoto(item)"></button>
              </view>
              <!-- #endif -->
              <!-- #ifndef MP-WEIXIN -->
              <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center"
                    style="position:relative;"
                    @click.stop="sharePhoto(item)"
              >
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       :src="`${IMG_URL}/index/jiating_fenxiangIcon.png`"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">分享</text>
              </view>
              <!-- #endif -->
            </view>
          </view>
        </view>
        <view id="right-column" style="width: 340rpx;">
          <view class="uploadPhoto_waterfall_list mt_19" v-for="(item, index) in photoAlbum.rightList" :key="index"
                @click.stop="findOutMore(item,index,'rightList')">
            <image :src="item.image" class="uploadPhoto_waterfall_list_image" mode="widthFix"></image>
            <view class="uploadPhoto_waterfall_list_bottom flex align-center justify-around">
              <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center"
                    style="position:relative;" @click.stop="personalAlbumLikes(item,index,'right')">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       :src="item.is_like != 1 ?`${IMG_URL}/index/thumbsUp.png`:`${IMG_URL}/index/thumbsUp_select.png`">
                </image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">爱心{{ item.like_count }}</text>
                <image class="gif" :src="`${IMG_URL}/index/dianzan_gif.gif`" v-if="!!item.showGif"></image>
              </view>
              <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center"
                    @click.stop="commentsFocus(item,index,'leftList')">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       :src="`${IMG_URL}/index/jiating_gengduoIcon.png`"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">评论{{ item.comment_count }}</text>
              </view>
              <!-- #ifdef MP-WEIXIN -->
              <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center"
                    style="position: relative">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       :src="`${IMG_URL}/index/jiating_fenxiangIcon.png`"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">分享</text>
                <button open-type="share" class="wh_100 hW_100"
                        :data-info="item"
                        style="position: absolute;top: 0;left: 0;opacity: 0;"
                        @tap.stop="sharePhoto(item)"
                ></button>
              </view>
              <!-- #endif -->
              <!-- #ifndef MP-WEIXIN -->
              <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center"
                    style="position: relative"
                    @click.stop="sharePhoto(item)"
              >
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       :src="`${IMG_URL}/index/jiating_fenxiangIcon.png`"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">分享</text>
              </view>
              <!-- #endif -->
            </view>
          </view>
        </view>
      </view>
      <view style="height: 250rpx;"></view>
    </scroll-view>

    <view class="anniversaryContent_bottomButtons flex align-center" v-if="page.options.is_share != 1"
          style="justify-content: space-evenly">
      <view class="anniversaryContent_bottomButton flex align-center justify-center" @click.stop="uploadPhoto">
        <text class="anniversaryContent_bottomButton_text">上传照片</text>
      </view>
    </view>

    <!-- #ifdef H5 -->
    <view v-if="page.showShareGuide"
          class="guide-wrap"
          @click.stop="closePopup"
    >
      <image
        class="guide-image"
        :src="sheep.$url.static('/assets/addons/shopro/uniapp/share/share_guide.png')"
      ></image>
    </view>
    <!-- #endif -->
  </view>
</template>

<script setup>
  import { onLoad, onReady, onShareAppMessage, onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { computed, getCurrentInstance, onMounted, reactive } from 'vue';
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import { baseUrl, h5_url } from '@/sheep/config';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import permision from '@/uni_modules/all-speech/js_sdk/wa-permission/permission';

  const { proxy } = getCurrentInstance();

  const page = reactive({
    options: {
      is_flag: 2,
    },
    headHeight: 0,
    showShareGuide: false,
  });
  const family = reactive({
    detail: {},
  });
  // 相册列表
  const photoAlbum = reactive({
    list: [],
    leftList: [],
    rightList: [],
  });
  // 获取相册列表参数
  const photoAlbumArgument = reactive({
    page: 1,
    pagesize: 20,
    total: 0,
  });

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image_path);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const wxShare = reactive({
    shareInfo: {
      title: '重拾亲情，孝道传承...',
      path: '',
      imageUrl: '',
    },
  });
  const bind_id = computed(() => sheep.$store('AI').bind_id);

  onLoad((options) => {
    if (!!options.spid) {
      sheep.$store('AI').setBindId(options.spid);
    }
    page.options = options;
    uni.$on('upLoadPhoto', async () => {
      photoAlbumArgument.page = 1;
      photoAlbum.list = [];
      photoAlbum.leftList = [];
      photoAlbum.rightList = [];
      setTimeout(async () => {
        await getPhotoAlbumList();
      }, 500);
    });
  });

  onShow(async () => {
    if (!!bind_id.value && !!isLogin.value) {
      const { code } = await sheep.$api.user.bindParent({ parent_id: bind_id.value });
      if (code == 1) {
        sheep.$store('AI').setBindId('');
      }
    }
  });

  onReady(() => {
    photoAlbumArgument.page = 1;
    photoAlbum.list = [];
    photoAlbum.leftList = [];
    photoAlbum.rightList = [];
    // 获取家庭详情
    getFamilyDetail();
    // 获取相册列表
    getPhotoAlbumList();
    uni.$on('deletePicture', (info) => {
      photoAlbum.leftList.forEach((item, index) => {
        if (item.id == info) {
          getPhotoAlbumList();
        }
      });
      photoAlbum.rightList.forEach((item, index) => {
        if (item.id == info) {
          getPhotoAlbumList();
        }
      });
    });
  });

  function getPageHeight(number) {
    page.headHeight = number;
  }

  // 获取家庭详情
  async function getFamilyDetail() {
    const { data } = await sheep.$api.family.getFamilyCulture({
      family_id: page.options.family_id,
    });
    family.detail = data;
    // #ifdef H5
    sheep.$platform.share.updateShareInfo({
      title: '拾亲',
      desc: `${family.detail.name}`,
      link: `${h5_url}/#/pages/family/photoAlbum?is_share=1&family_id=${page.options.family_id}&spid=${sheep.$store('user').userInfo.uid}&is_flag=${page.options.is_flag}&member_id=${page.options.member_id}&name=${page.options.name}`,
      image: `${h5_url}/static/fenxiang_icon.png`,
    });
    // #endif
  }

  async function getPhotoAlbumList() {
    let obj = {};
    if (!!page.options.family_id) {
      obj.family_id = page.options.family_id;
    }
    if (!!page.options.member_id && page.options.member_id != 'undefined') {
      obj.member_id = page.options.member_id;
    }
    obj.page = photoAlbumArgument.page;
    obj.pagesize = photoAlbumArgument.pagesize;
    const { data } = await sheep.$api.family.getFamilyImage(obj);
    photoAlbumArgument.total = data.count;
    photoAlbum.list = [];
    photoAlbum.leftList = [];
    photoAlbum.rightList = [];
    for (let i = 0; i < data.list.length; i++) {
      photoAlbum.list.push(data.list[i]);
      let leftRect = await $uGetRect('#left-column');
      let rightRect = await $uGetRect('#right-column');
      if (leftRect.height < rightRect.height) {
        photoAlbum.leftList.push(data.list[i]);
      } else if (leftRect.height > rightRect.height) {
        photoAlbum.rightList.push(data.list[i]);
      } else {
        // 这里是为了保证第一和第二张添加时，左右都能有内容
        // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
        if (photoAlbum.leftList.length <= photoAlbum.rightList.length) {
          photoAlbum.leftList.push(data.list[i]);
        } else {
          photoAlbum.rightList.push(data.list[i]);
        }
      }
    }
  }

  function $uGetRect(selector, all) {
    return new Promise((resolve) => {
      uni.createSelectorQuery()
        .in(proxy)
        [all ? 'selectAll' : 'select'](selector)
        .boundingClientRect((rect) => {
          if (all && Array.isArray(rect) && rect.length) {
            resolve(rect);
          }
          if (!all && rect) {
            resolve(rect);
          }
        })
        .exec();
    });
  }

  // #ifdef APP-PLUS
  const CAMERA_PERMISSION_DENIED_TITLE = '开启相机权限';
  const CAMERA_PERMISSION_DENIED_CONTENT = '你还没有开启相机权限，无法使用拾亲扫描功能、拍照或录制视频功能';
  const PHOTO_PERMISSION_DENIED_TITLE = '开启相册权限';
  const PHOTO_PERMISSION_DENIED_CONTENT = '你还没有开启相册权限，无法使用设置头像功能、发布圈子或相册功能';
  const PHOTOW_PERMISSION_DENIED_TITLE = '开启相册权限';
  const PHOTOW_PERMISSION_DENIED_CONTENT = '你还没有开启相册权限，无法使用设置头像功能、发布圈子或相册功能';

  async function checkCameraPermission(platform) {
    try {
      let limitsOfAuthority;
      if (platform.toLowerCase() === 'ios') {
        limitsOfAuthority = await permision.judgeIosPermission('camera');
      } else {
        limitsOfAuthority = await permision.requestAndroidPermission('android.permission.CAMERA');
      }

      if (limitsOfAuthority !== 1) {
        uni.showModal({
          title: CAMERA_PERMISSION_DENIED_TITLE,
          content: CAMERA_PERMISSION_DENIED_CONTENT,
          success: async (res) => {
            if (res.confirm) {
              permision.gotoAppPermissionSetting();
            }
          },
        });
        return false;
      }
      let photoAlbumWrite;
      if (platform.toLowerCase() === 'ios') {
        photoAlbumWrite = await permision.judgeIosPermission('photoLibrary');
      } else {
        photoAlbumWrite = await permision.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE');
      }

      if (photoAlbumWrite !== 1) {
        uni.showModal({
          title: PHOTO_PERMISSION_DENIED_TITLE,
          content: PHOTO_PERMISSION_DENIED_CONTENT,
          success: async (res) => {
            if (res.confirm) {
              permision.gotoAppPermissionSetting();
            }
          },
        });
        return false;
      }

      let photoAlbumRead;
      if (platform.toLowerCase() === 'ios') {
        photoAlbumRead = await permision.judgeIosPermission('photoLibrary');
      } else {
        photoAlbumRead = await permision.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE');
      }

      if (photoAlbumRead !== 1) {
        uni.showModal({
          title: PHOTOW_PERMISSION_DENIED_TITLE,
          content: PHOTOW_PERMISSION_DENIED_CONTENT,
          success: async (res) => {
            if (res.confirm) {
              permision.gotoAppPermissionSetting();
            }
          },
        });
        return false;
      }

      return true;
    } catch (error) {
      console.error('权限检查失败:', error);
      uni.showToast({ title: '权限检查失败，请稍后再试', icon: 'none' });
      return false;
    }
  }

  async function handleScanAndChooseImage() {
    try {
      uni.chooseImage({
        count: 9,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: async (res) => {
          uni.showLoading({
            title: '上传图片中，请稍后',
          });
          let imageList = [];
          let allLength = res.tempFilePaths.length;
          res.tempFilePaths.forEach((item, index1) => {
            // #ifdef H5
            sheep.$platform.upload.uploadFile(item, res.tempFiles[index1].size, (info) => {
              sheep.$api.family.addFamilyImage({
                images: [info.fullurl],
                family_id: page.options.family_id,
                member_id: page.options.member_id || '',
              }).then(() => {
                if (index1 == allLength - 1) {
                  uni.$emit('upLoadPhoto');
                }
              });
              uni.hideLoading();
            });
            // #endif
            // #ifndef H5
            uni.compressImage({
              src: item,
              success: (info) => {
                console.log('压缩过后的图片=>', info);
                uni.uploadFile({
                  url: `${baseUrl}/api/common/uploadFile`,
                  filePath: info.tempFilePath,
                  fileType: 'image',
                  name: 'pics',
                  formData: {
                    'file': 'pics',
                  },
                  header: {
                    // #ifdef MP
                    'Content-Type': 'multipart/form-data',
                    // #endif
                    ['token']: uni.getStorageSync('token'),
                    'file': info.tempFilePath,
                  },
                  success: async (info) => {
                    console.log('图片上传成功=>', JSON.parse(info.data));
                    sheep.$api.family.addFamilyImage({
                      images: [JSON.parse(info.data).data.fullurl],
                      family_id: page.options.family_id,
                      member_id: page.options.member_id || '',
                    }).then(() => {
                      console.log(index1, allLength);
                      if (index1 == allLength - 1) {
                        uni.$emit('upLoadPhoto');
                      }
                    });
                    uni.hideLoading();
                  },
                });
              },
            });
            console.log('item=>', item);
            // #endif
          });
        },
        fail: (res) => {
          // sheep.$helper.toast('图片大小超过限制，请重新上传');
        },
      });
    } catch (error) {

    }
  }

  // #endif

  async function uploadPhoto() {
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    // #ifdef APP-PLUS
    if (sheep.$platform.device.platform.toLowerCase() === 'ios') {
      uni.chooseImage({
        count: 9,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: async (res) => {
          uni.showLoading({
            title: '上传图片中，请稍后',
          });
          let imageList = [];
          let allLength = res.tempFilePaths.length;
          res.tempFilePaths.forEach((item, index1) => {
            // #ifdef H5
            sheep.$platform.upload.uploadFile(item, res.tempFiles[index1].size, (info) => {
              sheep.$api.family.addFamilyImage({
                images: [info.fullurl],
                family_id: page.options.family_id,
                member_id: page.options.member_id || '',
              }).then(() => {
                if (index1 == allLength - 1) {
                  uni.$emit('upLoadPhoto');
                }
              });
              uni.hideLoading();
            });
            // #endif
            // #ifndef H5
            uni.compressImage({
              src: item,
              success: (info) => {
                console.log('压缩过后的图片=>', info);
                uni.uploadFile({
                  url: `${baseUrl}/api/common/uploadFile`,
                  filePath: info.tempFilePath,
                  fileType: 'image',
                  name: 'pics',
                  formData: {
                    'file': 'pics',
                  },
                  header: {
                    // #ifdef MP
                    'Content-Type': 'multipart/form-data',
                    // #endif
                    ['token']: uni.getStorageSync('token'),
                    'file': info.tempFilePath,
                  },
                  success: async (info) => {
                    console.log('图片上传成功=>', JSON.parse(info.data));
                    sheep.$api.family.addFamilyImage({
                      images: [JSON.parse(info.data).data.fullurl],
                      family_id: page.options.family_id,
                      member_id: page.options.member_id || '',
                    }).then(() => {
                      console.log(index1, allLength);
                      if (index1 == allLength - 1) {
                        uni.$emit('upLoadPhoto');
                      }
                    });
                    uni.hideLoading();
                  },
                });
              },
            });
            console.log('item=>', item);
            // #endif
          });
        },
        fail: (res) => {
          // sheep.$helper.toast('图片大小超过限制，请重新上传');
        },
      });
    } else {
      let res = plus.navigator.checkPermission('android.permission.CAMERA');
      let res1 = plus.navigator.checkPermission('android.permission.READ_EXTERNAL_STORAGE');
      let res2 = plus.navigator.checkPermission('android.permission.WRITE_EXTERNAL_STORAGE');
      if ((res == 'authorized') && (res1 == 'authorized') && (res2 == 'authorized')) {
        if (sheep.$platform.device.platform.toLowerCase() === 'ios' || sheep.$platform.device.platform.toLowerCase() === 'android') {
          if (await checkCameraPermission(sheep.$platform.device.platform)) {
            await handleScanAndChooseImage();
          }
        }
      } else {
        if (res != 'authorized' || res1 != 'authorized' || res2 != 'authorized') {
          uni.showModal({
            title: '开启相册和相机权限',
            content: '你还没有开启相册和相机权限，无法使用拾亲扫描功能、拍照或录制视频功能、设置头像发布圈子等功能',
            success: async (res) => {
              if (res.confirm) {
                if (sheep.$platform.device.platform.toLowerCase() === 'ios' || sheep.$platform.device.platform.toLowerCase() === 'android') {
                  if (await checkCameraPermission(sheep.$platform.device.platform)) {
                    await handleScanAndChooseImage();
                  }
                }
              }
            },
          });
        }

      }
    }
    // #endif
    // #ifndef APP-PLUS
    uni.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album'],
      success: async (res) => {
        uni.showLoading({
          title: '上传图片中，请稍后',
        });
        let imageList = [];
        let allLength = res.tempFilePaths.length;
        res.tempFilePaths.forEach((item, index1) => {
          // #ifdef H5
          sheep.$platform.upload.uploadFile(item, res.tempFiles[index1].size, (info) => {
            sheep.$api.family.addFamilyImage({
              images: [info.fullurl],
              family_id: page.options.family_id,
              member_id: page.options.member_id || '',
            }).then(() => {
              if (index1 == allLength - 1) {
                uni.$emit('upLoadPhoto');
              }
            });
            uni.hideLoading();
          });
          // #endif
          // #ifndef H5
          uni.compressImage({
            src: item,
            success: (info) => {
              console.log('压缩过后的图片=>', info);
              uni.uploadFile({
                url: `${baseUrl}/api/common/uploadFile`,
                filePath: info.tempFilePath,
                fileType: 'image',
                name: 'pics',
                formData: {
                  'file': 'pics',
                },
                header: {
                  // #ifdef MP
                  'Content-Type': 'multipart/form-data',
                  // #endif
                  ['token']: uni.getStorageSync('token'),
                  'file': info.tempFilePath,
                },
                success: async (info) => {
                  console.log('图片上传成功=>', JSON.parse(info.data));
                  sheep.$api.family.addFamilyImage({
                    images: [JSON.parse(info.data).data.fullurl],
                    family_id: page.options.family_id,
                    member_id: page.options.member_id || '',
                  }).then(() => {
                    console.log(index1, allLength);
                    if (index1 == allLength - 1) {
                      uni.$emit('upLoadPhoto');
                    }
                  });
                  uni.hideLoading();
                },
              });
            },
          });
          console.log('item=>', item);
          // #endif
        });
      },
      fail: (res) => {
        // sheep.$helper.toast('图片大小超过限制，请重新上传');
      },
    });
    // #endif
  }

  // 获取更多的相册列表
  function waterfallScrolltolower() {
    if (photoAlbumArgument.page * photoAlbumArgument.pagesize < photoAlbumArgument.total) {
      photoAlbumArgument.page += 1;
      getPhotoAlbumList();
    }
  }

  // 跳转照片详情页
  function findOutMore(info, index, type = 'leftList') {
    uni.$on('giveALike_photo', (res) => {
      if (res.type == 'giveALike') {
        photoAlbum.leftList.forEach((item, index) => {
          if (item.id == res.id) {
            photoAlbum.leftList[index].like_count = Number(photoAlbum.leftList[index].like_count) + 1;
            photoAlbum.leftList[index].is_like = 1;
          }
        });
        photoAlbum.rightList.forEach((item, index) => {
          if (item.id == res.id) {
            photoAlbum.rightList[index].like_count = Number(photoAlbum.rightList[index].like_count) + 1;
            photoAlbum.rightList[index].is_like = 1;
          }
        });
      } else if (res.type == 'commit') {
        console.log('commit');
        photoAlbum.leftList.forEach((item, index) => {
          if (item.id == res.id) {
            photoAlbum.leftList[index].comment_count = Number(photoAlbum.leftList[index].comment_count) + 1;
          }
        });
        photoAlbum.rightList.forEach((item, index) => {
          if (item.id == res.id) {
            photoAlbum.rightList[index].comment_count = Number(photoAlbum.rightList[index].comment_count) + 1;
          }
        });
      } else {
        uni.$off('giveALike_photo');
      }
    });
    sheep.$router.go('/pages/family/photoDetails', {
      id: info.id,
      is_flag: page.options.is_flag,
      name: page.options.name,
      member_id: page.options.member_id || '',
      index,
      type,
      is_share: page.options.is_share != 1 ? 0 : 1,
      is_detail: page.options.is_share != 1 ? 0 : 1,
      family_id: page.options.family_id,
    });
  }


  // 相册点赞
  async function personalAlbumLikes(info, index, type = 'left') {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    const { data } = await sheep.$api.family.like({
      comment_id: info.id,
      type: 2,
    });
    await modify(1, index, type);
  }

  function modify(click, index, flag = 'left') {
    if (flag == 'left') {
      photoAlbum.leftList[index].like_count++;
      photoAlbum.leftList[index].is_like = 1;
      photoAlbum.leftList[index].showGif = true;
      if (!!photoAlbum.leftList[index].timeOut) {
        clearTimeout(photoAlbum.leftList[index].timeOut);
      }
      photoAlbum.leftList[index].timeOut = setTimeout(() => {
        photoAlbum.leftList[index].showGif = false;
      }, 1000);
    } else {
      photoAlbum.rightList[index].like_count++;
      photoAlbum.rightList[index].is_like = 1;
      photoAlbum.rightList[index].showGif = true;
      if (!!photoAlbum.rightList[index].timeOut) {
        clearTimeout(photoAlbum.rightList[index].timeOut);
      }
      photoAlbum.rightList[index].timeOut = setTimeout(() => {
        photoAlbum.rightList[index].showGif = false;
      }, 1000);
    }
  }

  // 相册评论
  function commentsFocus(info, index, type = 'leftList') {
    if (page.options.is_share == 1) {
      return;
    }
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    uni.$on('giveALike_photo', (res) => {
      if (res.type == 'giveALike') {
        photoAlbum.leftList.forEach((item, index) => {
          if (item.id == res.id) {
            photoAlbum.leftList[index].like_count++;
            photoAlbum.leftList[index].is_like = 1;
          }
        });
        photoAlbum.rightList.forEach((item, index) => {
          if (item.id == res.id) {
            photoAlbum.rightList[index].like_count++;
            photoAlbum.rightList[index].is_like = 1;
          }
        });
      } else if (res.type == 'commit') {
        photoAlbum.leftList.forEach((item, index) => {
          if (item.id == res.id) {
            photoAlbum.leftList[index].comment_count++;
          }
        });
        photoAlbum.rightList.forEach((item, index) => {
          if (item.id == res.id) {
            photoAlbum.rightList[index].comment_count++;
          }
        });
      } else {
        uni.$off('giveALike_photo');
      }
    });
    sheep.$router.go('/pages/family/photoDetails', {
      is_showComments: true,
      id: info.id,
      is_flag: page.options.is_flag,
      name: page.options.name,
      member_id: page.options.member_id || '',
      index,
      type,
      is_share: page.options.is_share != 1 ? 0 : 1,
      is_detail: page.options.is_share != 1 ? 0 : 1,
      family_id: page.options.family_id,
    });
  }

  // 相册分享
  function sharePhoto(info) {
    console.log(info);
    // #ifdef MP-WEIXIN
    wxShare.shareInfo.path = `pages/family/photoDetails?id=${info.id}&spid=${sheep.$store('user').userInfo.uid}&is_share=1&is_flag=${page.options.is_flag}&member_id=${page.options.member_id}&name=${page.options.name}`;
    wxShare.shareInfo.imageUrl = info.image;
    wxShare.shareInfo.title = `${family.detail.name}相册`;
    setTimeout(() => {
      wxShare.shareInfo.path = '';
    }, 500);
    // #endif
    // #ifdef H5
    sheep.$platform.share.updateShareInfo({
      title: '拾亲',
      desc: `${family.detail.name}相册`,
      link: `${h5_url}/#/pages/family/photoDetails?id=${info.id}&spid=${sheep.$store('user').userInfo.uid}&is_share=1&is_flag=${page.options.is_flag}&member_id=${info.member_id}&name=${page.options.name}&is_detail=0&family_id=${info.family_id}`,
      image: `${h5_url}/static/fenxiang_icon.png`,
    });
    page.showShareGuide = true;
    // #endif
    // #ifdef APP-PLUS
    sheep.$platform.share.shareAPP({
      title: `${family.detail.name}相册`,
      desc: '再小的家庭-也要有传承',
      link: `pages/family/photoDetails?id=${info.id}&spid=${sheep.$store('user').userInfo.uid}&is_share=1&is_flag=${page.options.is_flag}&member_id=${info.member_id}&name=${page.options.name}&is_detail=0&family_id=${info.family_id}`,
      image: `${h5_url}/static/shiqin_transparent_icon.png`,
    });
    // #endif
  }

  function closePopup() {
    sheep.$platform.share.updateShareInfo({
      title: '拾亲',
      desc: `${family.detail.name}`,
      link: `${h5_url}/#/pages/family/photoAlbum?is_share=1&family_id=${page.options.family_id}&spid=${sheep.$store('user').userInfo.uid}&is_flag=${page.options.is_flag}&member_id=${page.options.member_id}&name=${page.options.name}`,
      image: `${h5_url}/static/fenxiang_icon.png`,
    });
    page.showShareGuide = false;
  }

  function getShareInfo() {
    return wxShare;
  }

  onShareAppMessage(async (res) => {
    console.log('点击分享的模式为=>', res.from);
    if (res.from == 'menu') {
      wxShare.shareInfo.path = `/pages/family/photoAlbum?is_share=1&family_id=${page.options.family_id}&is_flag=${page.options.is_flag}&member_id=${page.options.member_id}&name=${page.options.name}`;
      if (page.options.is_flag == 1) {
        wxShare.shareInfo.title = `${page.options.name}的个人相册`;
      } else {
        wxShare.shareInfo.title = `${family.detail.name}相册`;
      }
      setTimeout(() => {
        wxShare.shareInfo = {
          title: '重拾亲情，孝道传承...',
          path: '',
          imageUrl: '',
        };
      }, 1000);
    }
    let info = {};
    if (!!res.target) {
      info = res.target.dataset.info;
    }
    let name = '';
    if (page.options.is_flag == 1) {
      name = `${page.options.name}`;
    } else {
      name = `${family.detail.name}`;
    }
    wxShare.shareInfo.path = `/pages/family/photoDetails?id=${info.id}&spid=${sheep.$store('user').userInfo.uid}&is_share=1&is_flag=${page.options.is_flag}&member_id=${info.member_id}&name=${name}&is_detail=0&family_id=${info.family_id}`;
    wxShare.shareInfo.imageUrl = info.image;
    console.log(page.options.is_flag);
    if (page.options.is_flag == 1) {
      wxShare.shareInfo.title = `${page.options.name}的相册`;
    } else {
      wxShare.shareInfo.title = `${family.detail.name}相册`;
    }
    setTimeout(() => {
      wxShare.shareInfo.path = '';
    }, 500);
    return {
      title: wxShare.shareInfo.title || '重拾亲情，孝道传承...',
      path: wxShare.shareInfo.path || `/pages/message/genealogy?spid=${sheep.$store('user').userInfo.uid}`,
      imageUrl: wxShare.shareInfo.imageUrl,
    };
  });
</script>


<style scoped lang="scss">
  .uploadPhoto_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .uploadPhoto_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }

  .uploadPhoto_waterfall {
    width: 750rpx;

    .uploadPhoto_waterfall_list {
      width: 340rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      position: relative;

      .uploadPhoto_waterfall_list_image {
        width: 340rpx;
      }

      .uploadPhoto_waterfall_list_bottom {
        //position: absolute;
        //bottom: 0;
        width: 340rpx;
        height: 110rpx;
        background: #FFFFFF;
        //border-radius: 0rpx 0rpx 20rpx 20rpx;
        //z-index: 1;

        .uploadPhoto_waterfall_list_bottom_icon {
          .uploadPhoto_waterfall_list_bottom_icon_image {
            width: 35rpx;
            height: 35rpx;
          }

          .uploadPhoto_waterfall_list_bottom_icon_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }
      }
    }
  }


  .anniversaryContent_bottomButtons {
    position: fixed;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 750rpx;
  }

  .anniversaryContent_bottomButton {
    width: 312rpx;
    height: 70rpx;
    background: rgba(255, 66, 6, 0.7);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    //position: fixed;
    //bottom: 40rpx;
    //left: 50%;
    //transform: translateX(-50%);
    //z-index: 10;

    .anniversaryContent_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .gif {
    position: absolute;
    top: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 60rpx;
  }

  /* #ifdef H5 */
  .guide-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10070;
    background: rgba(0, 0, 0, 0.6);
  }

  .guide-image {
    right: 30rpx;
    top: 0;
    position: fixed;
    width: 580rpx;
    height: 430rpx;
    z-index: 10080;
  }

  /* #endif */
</style>
